<template>
	<view>
		<u-navbar back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" title="确认订单" :background="navbarBackground"></u-navbar>
		<view class="main">
			<view class="top">
				<u-icon size="120" name="checkmark-circle-fill"></u-icon>
				<text class="top-title">支付成功</text>
			</view>
			<!--  -->
		</view>
		<view class="btns"><u-button class="btn" :custom-style="btnStyle" shape="circle" :ripple="true" ripple-bg-color="#8EB7FA" @click="handleBack">回到首页</u-button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			btnStyle: {
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1'
			}
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	methods: {
		handleBack() {
			uni.switchTab({
				url: '../../index/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	.top {
		width: 100%;
		padding: 50rpx 0 $uni-spacing-col-lg 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background-image: linear-gradient(90deg, rgb(27, 52, 92), rgb(49, 84, 142));
		color: #f1f1f1;

		.top-title {
			font-size: 1rem;
			letter-spacing: 5rpx;
			padding: $uni-spacing-col-lg 0;
		}
	}
}
.btns {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
}
</style>
